<template>
  <div class="pageContainer">
    <h3>开票管理</h3>
    <div>
      <div style="display: flex;align-items: center;margin-bottom: 16px;margin-top: 32px;flex-wrap: wrap">
        <div class="formItem">
          <div class="label">用户编号:</div>
          <el-input v-model="param.userNo" placeholder="请输入编号" class="inputStyle"></el-input>
        </div>
        <div class="formItem">
          <div class="label">申请日期:</div>
          <div style="display: flex;flex-wrap: wrap;">
            <el-date-picker
                v-model="param.beginTime"
                style="width: 232px;margin-right: 8px;"
                type="date"
                :picker-options="{
                disabledDate:e =>  (param.endTime && e > new Date(param.endTime)) || e > new Date()
              }"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"
            >
            </el-date-picker>
            <el-date-picker
                v-model="param.endTime"
                style="width: 232px;"
                type="date"
                :picker-options="{
                disabledDate:e =>  (param.beginTime && e < new Date(param.beginTime)) || e > new Date()
              }"
                value-format="yyyy-MM-dd"
                placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="formItem" style="margin-right: 0;">
          <div class="label">开票状态:</div>
          <el-select v-model="param.status" class="inputStyle">
            <el-option :value="null" label="全部"></el-option>
            <el-option :value="0" label="待开票"></el-option>
            <el-option :value="1" label="已开票"></el-option>
            <el-option :value="2" label="已拒绝"></el-option>
          </el-select>
        </div>
        <div style="display: flex;align-items: center;margin-left: 40px;">
          <div class="basicSearchLightBtn" style="margin-right: 8px;" @click="getTableList">
            <img src="@/assets/svg/white-search.svg"/>
            <div>查询</div>
          </div>
          <div class="basicSearchBtn" @click="handleReset">
            <img src="@/assets/svg/reset.svg"/>
            <div>重置</div>
          </div>
        </div>

      </div>
    </div>
    <div style="margin-top:16px;">
      <el-table fit :data="tableData">
        <el-table-column label="服务编号" prop="invoiceId"></el-table-column>
        <el-table-column label="用户编号" prop="userNo"></el-table-column>
        <el-table-column label="申请日期" prop="createDate"></el-table-column>
        <el-table-column label="开票金额" prop="money">
          <template slot-scope="{row}">
            <div>¥{{ row.money }}</div>
          </template>
        </el-table-column>
        <el-table-column label="开票信息">
          <template slot-scope="{row}">
            <div class="basicColorStyle" @click="handleShowInfo(row)" style="cursor: pointer;">查看</div>
          </template>
        </el-table-column>
        <el-table-column label="发票类型" prop="kind"></el-table-column>
        <el-table-column label="开票状态" prop="status">
          <template slot-scope="{row}">
            <div v-if="row.status === 1"  class="normal" style="color: #999999;">已开票</div>
            <div v-if="row.status === 0" class="waitTicket">待开票</div>
            <div v-if="row.status === 2" class="rejectTicket">已拒绝</div>
          </template>
        </el-table-column>
        <el-table-column label="操作 " width="200">
          <template slot-scope="{row}">
            <el-upload
                class="upload"
                name="files"
                :action="UPLOAD_BASE_URL"
                :limit="1"
                :show-file-list="false"
                v-if="row.status === 0"
                :on-success="handleUploadSuccess"
                :file-list="fileList">
              <el-button  type="text" class="basicColorStyle" @click="selectFile(row.invoiceId)">上传发票</el-button>
            </el-upload>
            <el-divider v-if="row.status === 0" direction="vertical"></el-divider>
            <el-button v-if="row.status === 0" type="text" class="warningColor" @click="showReject(row)">拒绝
            </el-button>
            <a target="_blank"  v-if="row.status === 1" :href="row.files" type="text" class="basicColorStyle">查看</a>
            <el-button v-if="row.status === 2" type="text" class="basicColorStyle" @click="showReason(row.reason)">
              查看原因
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
          style="text-align: right;margin-top:40px;"
          @current-change="handleSizeChange"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"></el-pagination>
    </div>
    <el-dialog
        title="开票信息"
        :visible.sync="showTicketInfoSync"
        width="30%"
        :fullscreen="fullscreen"
        >
      <div>
        <div class="formItem" style="margin-bottom: 16px;margin-left: 32px;">
          <div class="formLabel" style="width: 40px;" >名称</div>
          <div class="formLabel">{{ targetInfo.info }}</div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
        title="拒绝原因"
        :visible.sync="reasonDailog"
        width="30%"
        :fullscreen="fullscreen"
        >
      <div>
        <div class="formItem" style="margin-bottom: 16px;margin-left: 32px;">
          <div class="formLabel">{{ reason }}</div>
        </div>
      </div>
    </el-dialog>
    
    <el-dialog
        title="拒绝原因"
        :visible.sync="rejectModel"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        :autosize="{ minRows: 12}"
        width="30%"
        :before-close="handleClose">
      <div style="display: flex;justify-content: center;">
        <el-input v-model="reason" type="textarea" placeholder="请输入拒绝原因，不超过100个字符数" :maxlength="100" style="width: 88%;" />
      </div>
      <span slot="footer" class="dialog-footer" style="margin-right: 30px;">
        <el-button class="smallTextLightBtn" style="border:none;margin-left: auto;" type="primary"
                   @click="handleReject">确 定</el-button>
        <el-button class="smallTextBtn" @click="rejectModel = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {rejectInvoice, getInvoiceList, uploadInvoice} from "@/api/money";
import {UPLOAD_BASE_URL} from "@/api/comman";

export default {
  name:"Ticket",
  data() {
    return {
      UPLOAD_BASE_URL,
      tableData: [],
      fileList: [],
      date: '',
      pageSize: 10,
      pageNo: 1,
      targetInfo: {},
      showTicketInfoSync: false,
      rejectModel: false,
      currentInvoiceId: null,
      total: null,
      reason: '',
      param: {
        userNo: null,
        status: null,
        beginTime: '',
        endTime: ''
      },
      reasonDailog : false,
    }
  },
  computed: {
    fullscreen() {
      const userAgent = navigator.userAgent || navigator.vendor || window.opera;
      return /Mobi|Android/i.test(userAgent);
    }
  },
  created() {
    this.getTableList()
  },
  methods: {
    handleClose() {
      this.rejectModel = false
      this.showTicketInfoSync = false
    },
    handleSizeChange(e) {
      this.pageNo = e;
      this.getTableList();
    },
    selectFile(e) {
      this.currentInvoiceId = e
      // uploadInvoice({id: this.currentInvoiceId, files:"https://www.baidu.com"}).then(res => {
      //   if (res) {
      //     this.$message.success('操作成功')
      //     this.getTableList()
      //   }
      // })
    },
    handleReset() {
      this.pageNo = 1;
      this.param = {
        userNo: null,
        status: null,
        beginTime: '',
        endTime: ''
      }
      this.getTableList()
    },
    getTableList() {
      const requestParam = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        param: this.param
      }
      getInvoiceList(requestParam).then(res => {
        if (res) {
          this.total = res.count
          this.tableData = res.list
        }
      })
    },
    showReject(e) {
      this.currentInvoiceId = e.invoiceId
      this.rejectModel = true
    },
    showReason(e) {
      // this.$alert(e, '拒绝原因', {
      //   showConfirmButton: false,
      // });
      this.reasonDailog = true;
      this.reason = e
    },
    async handleReject() {
      if (!this.reason || !this.reason.trim()) return this.$message.error('请输入拒绝原因')
      const data = await rejectInvoice({id: this.currentInvoiceId, reason: this.reason})
      if (data) {
        this.$message.success('操作成功!')
        this.handleClose()
        this.getTableList()
      }
    },
    handleShowInfo(e) {
      this.targetInfo = e
      this.showTicketInfoSync = true
    },
    handleUploadSuccess(res, file, fileList) {
      if (res.code === 200000) {
        // const path = res.data
        uploadInvoice({id: this.currentInvoiceId, files: res.data[0]}).then(res => {
          if (res) {
            this.$message.success('操作成功')
            this.getTableList()
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.smallTextLightBtn {
  background-color: #4169E1;
}
.smallTextBtn{color: #666666;
  border-color:#FFFFFF;
}

::v-deep .el-dialog__wrapper .el-dialog {
  border-radius: 8px; 
}
::v-deep .el-dialog__title {
  color: #333333;
  font-size: 16px;
  font-weight: bold; 
  font-family: PingFang SC, PingFang SC;
  margin-left: 32px;
}
::v-deep .el-dialog__header {
  padding-top: 32px; 
}
.formItem {
  display: flex;
  align-items: center;
  margin-right: 40px;

  .label {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    margin-right: 4px;
    white-space: nowrap;
  }

  .inputStyle {
    width: 232px;
  }
}

.pageContainer {
  padding: 45px 32px;
}

@media (max-width: 768px) {

  ::v-deep .el-dialog {
    width: 100% !important;

  }
}

.dialog-footer {
  display: flex;
  align-items: center;
}

.normal {
  font-weight: 400;
  font-size: 14px;
}
.normal::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
}

.waitTicket {
  font-weight: 400;
  font-size: 14px;
  color: var(--defaultColor);
}

.waitTicket::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #1A91FF;
  border-radius: 50%;
  margin-right: 4px;
}

.rejectTicket {
  font-weight: 400;
  font-size: 14px;
  color: var(--defaultColor)
}

.rejectTicket::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--warningColor);
  border-radius: 50%;
  margin-right: 4px;
}

.upload {
  display: inline-block;
}
</style>
